<!--
 * @Author Malred
 * @Date 2025-06-02 05:10:43
 * @Description 
 -->
<!-- base-table-header.vue -->
<template>
  <div class="table-header">
    <!-- 插槽可以自由插入任意结构，比如 el-form -->
    <div class="search-container">
      <slot name="search"></slot>
    </div>
    <div class="actions">
      <slot name="action">
        <el-button type="primary" @click="$emit('add')">新增</el-button>
        <el-button
            type="danger"
            @click="onDeleteSelected"
            :disabled="deleteDisabled"
        >
          删除选中
        </el-button>
      </slot>
    </div>
  </div>
</template>

<script setup>
defineProps({
  deleteDisabled: Boolean,
  onDeleteSelected: {
    type: Function,
    default: null
  }
});
defineEmits(['add']);
</script>

<style scoped>
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;   /* 垂直居中 */
  margin-bottom: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 12px;
}

.search-container {
  display: flex;
  align-items: center;
  flex-grow: 1;
  min-width: 200px;
  gap: 8px;
}

.actions {
  display: flex;
  gap: 8px;
}
</style>

